<template>
  <div class="forum-container">
    <div class="banner">
      <div class="banner-content">
        <h1>京剧艺术论坛</h1>
        <p>交流经验，分享心得，共同传承与发展京剧艺术</p>
      </div>
    </div>
    
    <div class="introduction-section">
      <div class="intro-content">
        <h2>论坛交流</h2>
        <p>京剧艺术论坛是京剧爱好者、学习者和专业人士的交流平台，在这里您可以讨论京剧表演技巧、欣赏心得、学习经验，也可以分享您的演出视频和音频作品，共同探讨京剧艺术的传承与发展。</p>
      </div>
    </div>

    <!-- 论坛公告 -->
    <div class="forum-announcement" v-if="announcement">
      <div class="announcement-content">
        <i class="el-icon-bell"></i>
        <span>公告：{{ announcement }}</span>
      </div>
    </div>
    
    <div class="filter-section">
      <div class="search-bar">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索帖子" 
          prefix-icon="el-icon-search"
          clearable
          @clear="resetSearch"
          @keyup.enter.native="searchTopics">
          <el-button slot="append" icon="el-icon-search" @click="searchTopics"></el-button>
        </el-input>
      </div>
      <div class="filter-options">
        <div class="filter-item">
          <span class="filter-label">专题:</span>
          <el-select v-model="activeCategory" placeholder="全部专题" @change="handleCategoryChange">
            <el-option 
              v-for="option in categoryOptions" 
              :key="option.value" 
              :label="option.label" 
              :value="option.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">排序:</span>
          <el-select v-model="sortBy" placeholder="排序方式" @change="loadPosts">
            <el-option label="最新发布" value="newest"></el-option>
            <el-option label="最多浏览" value="most_viewed"></el-option>
            <el-option label="最多评论" value="most_commented"></el-option>
            <el-option label="最多点赞" value="most_liked"></el-option>
          </el-select>
        </div>
        <div class="actions">
          <el-button type="primary" icon="el-icon-edit" @click="showCreatePostDialog">发表帖子</el-button>
        </div>
      </div>
    </div>

    <div class="content-section">
      <div class="forum-content">
        <!-- 主要帖子列表 -->
        <div class="topics-main">
          <!-- 帖子列表 -->
          <div class="topics-container" v-loading="loading">
            <div v-if="posts.length > 0" class="topics-list">
              <div v-for="post in posts" :key="post.postId" class="topic-item" @click="viewPostDetail(post.postId)">
                <div class="topic-avatar">
                  <el-popover
                    placement="right-start"
                    width="300"
                    trigger="hover"
                    popper-class="user-popover">
                    <div class="user-card">
                      <div class="user-card-header">
                        <img :src="post.avatar || '/images/default-avatar.png'" alt="" class="user-card-avatar">
                        <div class="user-card-info">
                          <div class="user-card-name">{{ post.screenName}}</div>
                          <div class="user-card-role">
                            <el-tag size="mini" :type="getRoleType(post.roleId)">
                              {{ getRoleName(post.roleId) }}
                            </el-tag>
                          </div>
                        </div>
                      </div>
                      <div class="user-card-body">
                        <div class="user-card-item">
                          <div class="item-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：</div>
                          <div class="item-content">{{ post.sex === 'male' ? '男' : post.sex === 'female' ? '女' : '保密' }}</div>
                        </div>
                        <div class="user-card-item" v-if="post.address">
                          <div class="item-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：</div>
                          <div class="item-content">{{ formatAddress(post.address) }}</div>
                        </div>
                        <div class="user-card-item" v-if="post.description">
                          <div class="item-label">个人简介：</div>
                          <div class="item-content">{{ post.description || '这个人很懒，什么都没写~' }}</div>
                        </div>
                       
                      </div>
                    </div>
                    <img slot="reference" :src="post.avatar" :alt="post.screenName">
                  </el-popover>
                </div>
                <div class="topic-content">
                  <div class="topic-header">
                    <h3 class="topic-title">{{ post.title }}</h3>
                    <div class="topic-tag" v-if="post.topicId">{{ getTopicName(post.topicId) }}</div>
                    <!-- <div class="topic-tag media-tag" v-if="post.mediaUrl">
                      <i class="el-icon-video-camera" v-if="post.mediaType === '2'"></i>
                      <i class="el-icon-headset" v-else-if="post.mediaType === '3'"></i>
                      <i class="el-icon-picture" v-else-if="post.mediaType === '1'"></i>
                      媒体
                    </div> -->
                  </div>
                  <!-- <p class="topic-summary">{{ post.content }}</p> -->
                  <div class="topic-meta">
                    <span class="author">{{ post.screenName}}</span>
                    <span class="date">{{ formatDate(post.createTime) }}</span>
                    <div class="topic-stats">
                      <span><i class="el-icon-view"></i> {{ post.views }}</span>
                      <span><i class="el-icon-chat-dot-round"></i> {{ post.comments }}</span>
                      <span><i class="fas fa-heart"></i> {{ post.likes }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 无帖子时的状态 -->
            <div v-else-if="!loading" class="empty-state">
              <i class="el-icon-chat-line-round"></i>
              <p>暂无帖子，成为第一个发帖的人吧！</p>
              <el-button type="primary" @click="showCreatePostDialog">发表帖子</el-button>
            </div>

            <!-- 分页 -->
            <div class="pagination-container" v-if="totalPosts > 0">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="currentPage"
                :page-sizes="[8, 16, 24, 32]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalPosts">
              </el-pagination>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏内容 -->
        <div class="forum-sidebar">
          <!-- 热门帖子 -->
          <div class="sidebar-section hot-topics">
            <h3><i class="el-icon-hot-water"></i> 热门帖子</h3>
            <ul class="hot-topics-list">
              <li v-for="(post, index) in hotPosts" :key="post.postId" @click="viewPostDetail(post.postId)" class="hot-topic-item">
                <div class="rank-badge" v-if="index < 5">{{ ['一', '二', '三', '四', '五'][index] }}</div>
                <div class="hot-topic-title">{{ post.title }}</div>
                <div class="hot-topic-stats">
                  <span><i class="el-icon-view"></i> {{ post.views }}</span>
                  <span><i class="el-icon-chat-dot-round"></i> {{ post.comments }}</span>
                  <span><i class="fas fa-heart"></i> {{ post.likes }}</span>
                </div>
              </li>
            </ul>
          </div>
          
          <!-- 论坛统计 -->
          <div class="sidebar-section forum-stats">
            <h3><i class="el-icon-data-line"></i> 论坛统计</h3>
            <ul class="stats-list">
              <li>
                <span class="stat-label">帖子总数</span>
                <span class="stat-value">{{ forumStats.postCount || 0 }}</span>
              </li>
              <li>
                <span class="stat-label">评论总数</span>
                <span class="stat-value">{{ forumStats.commentCount || 0 }}</span>
              </li>
              <li>
                <span class="stat-label">今日帖子数</span>
                <span class="stat-value">{{ forumStats.todayPosts || 0 }}</span>
              </li>
              <li>
                <span class="stat-label">今日评论数</span>
                <span class="stat-value">{{ forumStats.todayComments || 0 }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布帖子对话框 -->
    <el-dialog 
      title="发表新帖子" 
      :visible.sync="createPostDialogVisible"
      width="60%"
      :close-on-click-modal="false">
      <el-form :model="newPost" ref="postForm" :rules="postRules" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newPost.title" placeholder="请输入帖子标题"></el-input>
        </el-form-item>
        <el-form-item label="专题" prop="topicId">
          <el-select v-model="newPost.topicId" placeholder="请选择专题分类">
            <el-option 
              v-for="option in topicOptions" 
              :key="option.id" 
              :label="option.name" 
              :value="option.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input 
            type="textarea" 
            v-model="newPost.content" 
            :rows="6" 
            placeholder="请输入帖子内容">
          </el-input>
        </el-form-item>
        <el-form-item label="添加媒体">
          <el-radio-group v-model="newPost.mediaType" :disabled="!!newPost.mediaUrl">
            <el-radio label="0">纯文本</el-radio>
            <el-radio label="1">图片</el-radio>
            <el-radio label="2">视频</el-radio>
            <el-radio label="3">音频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="newPost.mediaType !== '0'" label="媒体文件" prop="mediaUrl">
          <el-upload
            class="upload-media"
            action="http://localhost:9002/api/system/image/post"
            :show-file-list="false"
            :on-success="handleMediaSuccess"
            :before-upload="beforeMediaUpload">
            <el-button size="small" type="primary">选择文件</el-button>
            <div class="el-upload__tip" slot="tip">
              <template v-if="newPost.mediaType === '2'">
                支持mp4、mov格式，不超过200MB
              </template>
              <template v-else-if="newPost.mediaType === '3'">
                支持mp3、wav格式，不超过50MB
              </template>
              <template v-else-if="newPost.mediaType === '1'">
                支持jpg、png、gif格式，不超过10MB
              </template>
            </div>
          </el-upload>
          <div v-if="newPost.mediaName" class="media-preview">
            <i class="el-icon-picture" v-if="newPost.mediaType === '1'"></i>
            <i class="el-icon-video-camera" v-if="newPost.mediaType === '2'"></i>
            <i class="el-icon-headset" v-else-if="newPost.mediaType === '3'"></i>
            <span>{{ newPost.mediaName }}</span>
            <i class="el-icon-delete" @click="removeMedia"></i>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="submitPost" :loading="submittingPost">发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'ForumVue',
  data() {
    return {
      activeCategory: 'all',
      searchQuery: '',
      sortBy: 'newest',
      loading: false,
      posts: [],
      totalPosts: 0,
      currentPage: 1,
      pageSize: 16,
      announcement: '欢迎来到京剧艺术论坛，请遵守社区规则，文明发言，共同维护良好的交流环境！',
      hotPosts: [],
      topicOptions: [], // 专题分类数据
      categoryOptions: [{ label: '全部帖子', value: 'all' }], // 分类下拉选项
      forumStats: {
        postCount: 0,
        commentCount: 0,
        todayPosts: 0,
        todayComments: 0
      },
      isLoggedIn: false,
      currentUserId: '',
      
      // 创建帖子
      createPostDialogVisible: false,
      submittingPost: false,
      newPost: {
        title: '',
        topicId: '',
        content: '',
        mediaType: '0',
        mediaUrl: '',
        mediaName: '',
        mediaFile: null
      },
      postRules: {
        title: [
          { required: true, message: '请输入帖子标题', trigger: 'blur' },
          { min: 2, max: 255, message: '标题长度在2到255个字符之间', trigger: 'blur' }
        ],
        topicId: [
          { required: true, message: '请选择专题', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入帖子内容', trigger: 'blur' },
          { min: 10, max: 1000, message: '内容长度在10到1000个字符之间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    document.title = '京剧苑 - 京剧艺术论坛';
    window.scrollTo(0, 0);
    this.checkLoginStatus();
    this.initData();
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const token = localStorage.getItem('token');
      this.isLoggedIn = !!token;
      if (this.isLoggedIn) {
        this.currentUserId = localStorage.getItem('userId') || '';
      }
    },
    
    // 获取角色类型对应的标签类型
    getRoleType(roleId) {
      const roleTypes = {
        '1': 'danger',  // 管理员
        '2': 'warning', // 艺术家
        '3': ''         // 普通用户
      };
      return roleTypes[roleId] || '';
    },
    
    // 获取角色名称
    getRoleName(roleId) {
      const roleNames = {
        '1': '管理员',
        '2': '普通用户',
        '3': '艺术家'
      };
      return roleNames[roleId] || '未知';
    },
    
    
    // 查看用户主页
    viewUserProfile(userId) {
      this.$router.push(`/user/${userId}`);
    },
    
    
    // 初始化页面数据
    initData() {
      this.loadTopics(); // 先加载专题分类数据
      this.loadPosts();
      this.loadHotPosts();
      this.loadForumStats();
    },
    
    
    // 加载专题分类数据
    loadTopics() {
      service.get('/api/forum/topic/getTopicLists').then(res => {
        if (res.code === 200) {
          this.topicOptions = (res.data || []).map(item => {
            return {
              id: item.topicId,
              name: item.topicName,
              description: item.description
            }
          });
          console.log(this.topicOptions);
          // 更新分类下拉选项
          this.categoryOptions = [
            { label: '全部帖子', value: 'all' }
          ].concat(this.topicOptions.map(topic => {
            return { label: topic.name, value: topic.id }
          }));
          console.log(this.categoryOptions);
        }

      }).catch(err => {
        console.error('加载专题分类失败:', err);
      });
    },
    
    // 加载热门帖子
    loadHotPosts() {
      service.get('/api/forum/post/getHotPosts').then(res => {
        if (res.code === 200 && res.data) {
          this.hotPosts = res.data || [];
        }
      }).catch(err => {
        console.error('加载热门帖子失败:', err);
      });
    },
    
    // 加载论坛统计
    loadForumStats() {
      service.get('/api/forum/post/getForumStatistics').then(res => {
        if (res.code === 200 && res.data) {
          this.forumStats = {
            postCount: res.data.postCount || 0,
            commentCount: res.data.commentCount || 0,
            todayPosts: res.data.todayPosts || 0,
            todayComments: res.data.todayComments || 0
          };
        }
      }).catch(err => {
        console.error('加载论坛统计失败:', err);
      });
    },
    
    // 处理每页显示数量变化
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadPosts();
    },
    
    // 加载帖子列表
    loadPosts() {
      this.loading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        topicId: this.activeCategory !== 'all' ? this.activeCategory : '',
        title: this.searchQuery,
        sortBy: this.sortBy
      }
      
      service.get('/api/forum/post/getPostList', { params }).then(res => {
        this.loading = false
        if (res.code === 200 && res.data) {
          // 将后台数据转换为前端所需格式
          this.posts =res.data.list || []
          this.totalPosts = res.data.total || 0
        }
      }).catch(err => {
        this.loading = false
        console.error('加载帖子列表失败:', err)
        this.$message.error('加载帖子失败，请稍后重试')
      })
    },

    // 分类变更
    handleCategoryChange() {
      this.currentPage = 1
      this.loadPosts()
    },
    
    // 搜索帖子
    searchTopics() {
      this.currentPage = 1
      this.loadPosts()
    },
    
    // 重置搜索
    resetSearch() {
      this.searchQuery = ''
      this.loadPosts()
    },
    
    // 分页变更
    handlePageChange(page) {
      this.currentPage = page
      this.loadPosts()
    },
    
    // 查看帖子详情
    viewPostDetail(id) {
      this.$router.push(`/forum/post/${id}`)
    },
    
    // 显示创建帖子对话框
    showCreatePostDialog() {
      // 检查登录状态
      const token = localStorage.getItem('token')
      if (!token) {
        this.$message.warning('请先登录后再发表帖子')
        this.$router.push('/login')
        return
      }
      
      this.createPostDialogVisible = true
    },
    
    // 上传前验证
    beforeMediaUpload(file) {
      // 验证视频文件
      if (this.newPost.mediaType === '2') {
        const isMP4 = file.type === 'video/mp4'
        const isMOV = file.type === 'video/quicktime'
        const isLt200M = file.size / 1024 / 1024 < 200
        
        if (!isMP4 && !isMOV) {
          this.$message.error('视频只能是 MP4 或 MOV 格式!')
          return false
        }
        if (!isLt200M) {
          this.$message.error('视频大小不能超过 200MB!')
          return false
        }
      }
      
      // 验证音频文件
      if (this.newPost.mediaType === '3') {
        const isMP3 = file.type === 'audio/mpeg'
        const isWAV = file.type === 'audio/wav'
        const isLt50M = file.size / 1024 / 1024 < 50
        
        if (!isMP3 && !isWAV) {
          this.$message.error('音频只能是 MP3 或 WAV 格式!')
          return false
        }
        if (!isLt50M) {
          this.$message.error('音频大小不能超过 50MB!')
          return false
        }
      }
      
      // 验证图片文件
      if (this.newPost.mediaType === '1') {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isGIF = file.type === 'image/gif'
        const isLt10M = file.size / 1024 / 1024 < 10
        
        if (!isJPG && !isPNG && !isGIF) {
          this.$message.error('图片只能是 JPG/PNG/GIF 格式!')
          return false
        }
        if (!isLt10M) {
          this.$message.error('图片大小不能超过 10MB!')
          return false
        }
      }
      
      return true
    },
    
    // 处理媒体上传成功
    handleMediaSuccess(res, file) {
      if (res.code === 200) {
        this.newPost.mediaUrl = res.data;
        this.newPost.mediaName = file.name;
        this.$message.success('媒体上传成功');
      } else {
        this.$message.error(res.msg || '上传失败');
      }
    },
    
    
    // 移除媒体
    removeMedia() {
      service.delete('/api/system/image/deletePost', {
        params: {
          url: this.newPost.mediaUrl
        }
      }).then(res => {
        if (res.code === 200) {
          this.newPost.mediaUrl = ''
          this.newPost.mediaName = ''
          this.$message.success('媒体文件已删除，可以重新选择媒体类型')
        } else {
          this.$message.error(res.msg || '删除媒体文件失败')
        }
      }).catch(err => {
        console.error('删除媒体文件失败:', err)
        this.$message.error('删除媒体文件失败，请稍后重试')
      })
    },
    

    // 提交帖子
    submitPost() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.submittingPost = true
          
          // 构建FormData
          const formData = {
            title: this.newPost.title,
            topicId: this.newPost.topicId,
            content: this.newPost.content,
            mediaType: this.newPost.mediaType,
            token: localStorage.getItem('token')
          }
          
          if (this.newPost.mediaType !== '0' && this.newPost.mediaUrl) {
            formData.mediaUrl = this.newPost.mediaUrl
          }
          
            service.post('/api/forum/post/addPost', formData ).then(res => {
            this.submittingPost = false
            if (res.code === 200) {
              this.$message.success('帖子发布成功')
              this.createPostDialogVisible = false
              // 重置表单
              this.newPost = {
                title: '',
                topicId: '',
                content: '',
                mediaType: '0',
                mediaUrl: '',
                mediaName: '',
                mediaFile: null
              }
              // 重新加载帖子
              this.currentPage = 1
              this.loadPosts()
            } else {
              this.$message.error(res.msg || '发布帖子失败')
            }
          }).catch(err => {
            this.submittingPost = false
            console.error('发布帖子失败:', err)
            this.$message.error('发布帖子失败，请稍后重试')
          })
        }
      })
    },
    
    // 获取专题名称
    getTopicName(topicId) {
      if (!topicId) return '未分类';
      if (topicId === 'all') return '全部';
      
      const topic = this.topicOptions.find(t => t.id === topicId);
      return topic ? topic.name : this.getCategoryName(topicId);
    },
    
    // 获取分类名称
    getCategoryName(category) {
      const categoryMap = {
        'experience': '经验交流',
        'appreciation': '京剧欣赏',
        'learning': '学习心得',
        'teaching': '教学视频',
        'news': '戏曲动态',
        'art_discussion': '艺术探讨',
        'works_display': '作品展示'
      }
      return categoryMap[category] || category
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '未知日期'
      
      const date = new Date(dateStr)
      const now = new Date()
      const diff = now - date
      
      // 一小时内显示"x分钟前"
      if (diff < 60 * 60 * 1000) {
        const minutes = Math.floor(diff / (60 * 1000))
        return `${minutes}分钟前`
      }
      
      // 一天内显示"x小时前"
      if (diff < 24 * 60 * 60 * 1000) {
        const hours = Math.floor(diff / (60 * 60 * 1000))
        return `${hours}小时前`
      }
      
      // 一周内显示"x天前"
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        const days = Math.floor(diff / (24 * 60 * 60 * 1000))
        return `${days}天前`
      }
      
      // 其他情况显示完整日期
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    },
    
    // 处理取消发布
    handleCancel() {
      this.createPostDialogVisible = false;
      // 重置表单
      this.newPost = {
        title: '',
        topicId: '',
        content: '',
        mediaType: '0',
        mediaUrl: '',
        mediaName: '',
        mediaFile: null
      };
    },
    formatAddress(address) {
      return address.replace(/,/g, '-');
}
  }
}
</script>

<style scoped>
.forum-container {
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: #f9f5f0;
}

.banner {
  height: 500px;
  background-image: url('../assets/opera_2.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(139, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}

.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.banner-content h1 {
  font-size: 4rem;
  font-family: 'STXingkai', 'STZhongsong', serif;
  margin-bottom: 15px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  color: #FFD700;
  letter-spacing: 10px;
}

.banner-content p {
  font-size: 1.4rem;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 3px;
}

.introduction-section {
  padding: 60px 10%;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.intro-content h2 {
  font-size: 2.4rem;
  color: #8B0000;
  margin-bottom: 30px;
  font-family: 'STZhongsong', serif;
  position: relative;
  display: inline-block;
}

.intro-content h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #8B0000;
}

.intro-content p {
  font-size: 1.2rem;
  line-height: 2;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}

.forum-announcement {
  background-color: #fff7e6;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 15px 20px;
  margin-bottom: 20px;
  border-left: 4px solid #e6a23c;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.announcement-content {
  display: flex;
  align-items: center;
  color: #8B0000;
}

.announcement-content i.el-icon-bell {
  font-size: 1.2rem;
  margin-right: 10px;
  color: #e6a23c;
}

.close-btn {
  margin-left: auto;
  color: #999;
}

.filter-section {
  padding: 20px 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.search-bar {
  width: 300px;
  max-width: 100%;
  margin-right: 20px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

.content-section {
  padding: 30px 8%;
  max-width: 1200px;
  margin: 0 auto;
}

.forum-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.topics-main {
  width: 100%;
}

.topics-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 500px;
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.topic-item {
  display: flex;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.topic-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.topic-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
}

.topic-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-content {
  flex-grow: 1;
}

.topic-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.topic-title {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  flex-grow: 1;
}

.topic-tag {
  background-color: rgba(139, 0, 0, 0.8);
  color: #FFD700;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.media-tag {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
}

.topic-summary {
  color: #666;
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-meta {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #999;
}

.topic-meta .author {
  font-weight: 500;
  color: #8B0000;
  margin-right: 10px;
}

.topic-meta .date {
  margin-right: 10px;
}

.topic-stats {
  margin-left: auto;
  display: flex;
  gap: 15px;
}

.topic-stats span {
  display: flex;
  align-items: center;
}

.topic-stats i {
  margin-right: 5px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 10px 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  text-align: center;
}

.empty-state i {
  font-size: 4rem;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 1.2rem;
  color: #999;
  margin-bottom: 20px;
}

/* 媒体预览 */
.media-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #d9ecff;
}

.media-preview i.el-icon-document-video,
.media-preview i.el-icon-headset {
  font-size: 1.2rem;
  color: #409EFF;
}

.media-preview i.el-icon-delete {
  margin-left: auto;
  color: #F56C6C;
  cursor: pointer;
}

.media-preview i.el-icon-delete:hover {
  transform: scale(1.1);
}

.forum-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.sidebar-section h3 {
  font-size: 1.1rem;
  color: #8B0000;
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.hot-topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-topics-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hot-topics-list li:last-child {
  border-bottom: none;
}

.hot-topics-list li:hover {
  padding-left: 5px;
  color: #8B0000;
}

.hot-topic-title {
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-topic-stats {
  display: flex;
  font-size: 0.8rem;
  color: #999;
  gap: 10px;
}

.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stats-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.stats-list li:last-child {
  border-bottom: none;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: bold;
  color: #8B0000;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .forum-content {
    grid-template-columns: 1fr;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-bar {
    width: 100%;
    margin-bottom: 15px;
    margin-right: 0;
  }
  
  .filter-options {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .banner-content h1 {
    font-size: 2.5rem;
    letter-spacing: 5px;
  }
  
  .banner-content p {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  
  .banner {
    height: 240px;
  }
  
  .filter-options {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .filter-label {
    min-width: 60px;
  }
  
  .content-section {
    padding: 20px 3%;
  }
  
  .forum-content {
    grid-template-columns: 1fr;
  }
  
  .forum-sidebar {
    order: -1;
  }
  
  .topic-item {
    flex-direction: column;
  }
  
  .topic-avatar {
    margin-bottom: 15px;
  }
  
  .topic-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .topic-stats {
    margin-left: 0;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .banner-content h1 {
    font-size: 2rem;
    letter-spacing: 3px;
  }
  
  .banner-content p {
    font-size: 1rem;
  }
  
  .intro-content h2 {
    font-size: 2rem;
  }
}

/* 用户卡片样式 */
.user-popover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
}

.user-card {
  padding: 0;
}

.user-card-header {
  display: flex;
  padding: 20px;
  background: linear-gradient(135deg, #8B0000, #C62828);
  color: white;
  border-radius: 5px 5px 0 0;
}

.user-card-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
  background-color: #f8f8f8;
}

.user-card-info {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-card-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card-role {
  margin-top: 5px;
}

.user-card-body {
  padding: 15px 20px;
  color: #333;
}

.user-card-item {
  margin-bottom: 10px;
  display: flex;
}

.item-label {
  font-weight: bold;
  width: 80px;
  flex-shrink: 0;
  color: #666;
}

.item-content {
  flex-grow: 1;
}

.user-card-statistics {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #8B0000;
}

.stat-label {
  font-size: 0.8rem;
  color: #999;
  margin-top: 5px;
}

.user-card-footer {
  padding: 10px 20px 20px;
  display: flex;
  justify-content: space-between;
}

/* 添加图标颜色样式 */
.topic-stats .el-icon-view {
  color: #409EFF; /* 蓝色 */
}

.topic-stats .el-icon-chat-dot-round {
  color: #67C23A; /* 绿色 */
}

.topic-stats .fa-heart {
  color: #ff4757; /* 红色 */
}

/* 热门帖子图标颜色 */
.hot-topic-stats .el-icon-view {
  color: #409EFF; /* 蓝色 */
}

.hot-topic-stats .el-icon-chat-dot-round {
  color: #67C23A; /* 绿色 */
}

.hot-topic-stats .fa-heart {
  color: #ff4757; /* 红色 */
}

/* 热门帖子排名标识 */
.hot-topic-item {
  position: relative;
  padding-left: 34px !important;
}

.rank-badge {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><rect width="28" height="28" rx="4" fill="%238B0000"/><rect x="2" y="2" width="24" height="24" rx="2" fill="%23FFD700" fill-opacity="0.9"/><rect x="4" y="4" width="20" height="20" rx="1" fill="%238B0000"/></svg>') no-repeat center;
  color: #FFD700;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'STXingkai', 'STZhongsong', serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 16px;
}

.hot-topic-item:hover .rank-badge {
  color: #FFF;
  transition: all 0.3s ease;
}
</style> 